<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import {ServerUtils} from '@/serverUtils'
import {Delta, QuillEditor} from '@vueup/vue-quill'
import MyQuill from '@/components/quillComponent.vue'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import {GetUserState} from '@/stores/userState';
import Viewer from '@/components/viewer.vue'

import * as cheerio from 'cheerio'

let editor = $ref<any>()
let user = GetUserState()
let content = $ref<Delta>(new Delta())

const getQuillHTML = (editor: any) => {
    return new QuillDeltaToHtmlConverter(editor.getContents().ops, {}).convert()
}

const props = defineProps({
    refresh: Function,
    subarea: Number,
    pid: Number,
    placeholder: String,
    hideAvatar:Boolean,
})

const emit = defineEmits(['publish'])

const handlePost = async () => {
    if (props.subarea)
        await ServerUtils.post(editor, props.subarea, null, 5, maxPostWordsLength).then(() => {
            emit("publish")
        })
    else if (props.pid) {
        await ServerUtils.comment(editor, props.pid, 5, maxPostWordsLength).then(() => {
            emit("publish")
        })
    }
}

let maxPostWordsLength = 150

</script>
<!-- }}} -->

<template>
    <div style="height: 100%;width: 100%;">
        <div class="dev-tag" v-if='$DEV'>postInputArea1
        </div>
        <div class="fhs post-area">
            <div class="user-avatar" >
                <el-avatar :size="50" v-if='!hideAvatar'
                    :src="Server.fileBaseURL + user.avatar" />
            </div>
            <div class="fvs post-textarea">
                <div class="post-textarea-wrapper">
                    <MyQuill theme="snow"
                        content-type="delta"
                        class="post-quill"
                        :placeholder="placeholder"
                        :content="content"
                        @ready="(e) => {editor = e}"
                        :max-words-length="maxPostWordsLength" />
                    <!-- {{ editor?.getText()}} {{ content}} -->
                </div>
                <el-button class="b-post"
                    @click="handlePost" color="#6666cc">发布
                </el-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.ql-bubble .ql-editor {
    padding: 0;
}

.card-block {
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-lighter);
    border-radius: 4px;
}

.post-area {
    flex-grow: 1;
    overflow: hidden;
}

.post-area {
    min-height:250px;
    height:100%;
    .user-avatar {
        margin: 10px 20px;
    }

    .post-textarea {
        justify-content: start;
        flex-grow: 1;
        margin-top: 10px;
        margin-right: 20px;

        .post-textarea-wrapper {
            height: 100%;
        }
    }

    .b-post {
        margin: 10px 0 30px;
        font-size: 16px;
        max-width: 100px;
        letter-spacing: 10px;
    }

    .b-post.b-post {
        text-indent: -10px;
        direction: rtl;
    }

}

.hover__g:hover {
    background-color: #f4f4f4;
}
</style>
<style>
.post-quill {
    height: 100%;
    width: 100%;
}

.ql-container {
    font-size: 16px;
}
</style>
